<template>
	<view>
		<!-- 顶部绿色区域 -->
		<view class="top">
			<view>
				<u-icon class="back" name="arrow-left" color="#fff" size="40" @click="goback"></u-icon>
			</view>
			<view class="img-box">
				<image class="img" :src= "queryData.avatar || '../../../static/user/touxiang.png'" @click="uploadImg"></image>
			</view>
			<view class="name">{{queryData.nickname}}</view>
		</view>
		<!-- 修改区域 -->
		<view class="set-box">
			<view class="set-item">
				<text>手机号</text>
				<input type="number" disabled="" placeholder="输入手机号" v-model="phone"/>
			</view>
			<view class="set-item">
				<text>昵 称</text>
				<input type="text" placeholder="输入昵称" v-model="queryData.nickname"/>
			</view>
			<view class="set-item">
				<text>性 别</text>
				<view class="checkbox">
					<view class="checkbox-item" @click="sex(0)">
						<image src="../../../static/user/setinfo/icon-check.png" v-if="queryData.sex==0"></image>
						<image src="../../../static/user/setinfo/icon-no.png" v-else></image>
						<text>未知</text>
					</view>
					<view class="checkbox-item" @click="sex(1)">
						<image src="../../../static/user/setinfo/icon-check.png" v-if="queryData.sex==1"></image>
						<image src="../../../static/user/setinfo/icon-no.png" v-else></image>
						<text>男</text>
					</view>
					<view class="checkbox-item" @click="sex(2)">
						<image src="../../../static/user/setinfo/icon-check.png" v-if="queryData.sex==2"></image>
						<image src="../../../static/user/setinfo/icon-no.png" v-else></image>
						<text>女</text>
					</view>
				</view>
			</view>
			<view class="set-item">
				<text>生 日</text>
				<picker mode="date" @change="bindDateChange">
				    <view style="margin-left: 26rpx;">{{queryData.birthday}}</view>
				</picker>
			</view>
			<view class="set-item">
				<text>微 信</text>
				<input type="text" placeholder="请输入您的微信号" v-model="queryData.wechat"/>
			</view>
			<view class="set-item">
				<text>邮 箱</text>
				<input type="text" placeholder="请输入您的邮箱" v-model="queryData.email"/>
			</view>
			<view class="revise" @click="editData">修改资料</view>
		</view>
	</view>
</template>

<script>
	import {editInfo,getUser} from "../../../api/user.js"
	export default{
		data(){
			return{
				choose:0,
				// date: "请选择日期",
				phone:'',
				memberInfo:{},
				queryData:{
					user_id:'',
					nickname:'',
					avatar:'',
					email:'',
					sex:'',
					wechat:'',
					birthday:''
				}
			}
		},
		onLoad() {
			this.getData()
		},
		methods:{
			//返回按钮
			goback(){
				uni.switchTab({
					url:'/pages/user/user'
				})
			},
			getData(){
				this.post(getUser,{
					user_id:uni.getStorageSync("userInfo").id
				}).then(res => {
					if(res.code == 1){
						this.queryData.user_id = uni.getStorageSync("userInfo").id
						this.phone = res.data.member_info.phone
						this.queryData.nickname = res.data.member_info.nickname
						this.queryData.avatar = res.data.member_info.avatar
						this.queryData.email = res.data.member_info.email
						this.queryData.sex = res.data.member_info.gender
						this.queryData.wechat = res.data.member_info.wechat
						this.queryData.birthday = res.data.member_info.birthday || "请选择日期"
					}
				})
			},
			uploadImg(){
				this.upimg((r)=>{
					console.log(r,1241)
					this.$nextTick(function(){
						this.queryData.avatar=r.file_path
					})
				},1)
			},
			sex(e){
				this.queryData.sex=e
			},
			bindDateChange(e) {
				this.queryData.birthday = e.detail.value
				console.log(e)
			},
			editData(){
				this.post(editInfo,this.queryData).then(res => {
					this.msg(res.msg)
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1500)
				})
			}
			
		}
	}
</script>

<style>
	page{
		background: #F6F6F6;
	}
	.top{
		width: 750rpx;
		height: 340rpx;
		background: #06923D;
		opacity: 1;
	}
	.back{
		margin-top: 30rpx;
		margin-left: 30rpx;
	}
	.img-box{
		width: 100%;
		margin: 0 auto;
		text-align: center;
		image{
			width: 65rpx;
			height: 65rpx;
		}
	}
	.img{
		width: 130rpx;
		height: 130rpx;
	}
	.name{
		width: 253rpx;
		height: 56rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin: 0 auto;
		text-align: center;
		margin-top: 20rpx;
	}
	.set-box{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 50rpx 30rpx;
		margin: 30rpx auto;
	}
	.set-item{
		background: #F6F6F6;
		display: flex;
		align-items: center;
		height: 58rpx;
		margin-bottom: 38rpx;
		padding-left: 20rpx;
	}
	.set-item>text{
		width: 160rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
	}
	.set-item>input{
		padding-left: 24rpx;
		
	}
	.revise{
		width: 610rpx;
		height: 88rpx;
		background: #06923D;
		border-radius: 62rpx;
		margin: 70rpx auto 50rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}
	.checkbox{
		padding-left: 20rpx;
		display: flex;
		align-items: center;
	}
	.checkbox-item>image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	.checkbox-item{
		display: flex;
		align-items: center;
		margin-right: 24rpx;
	}
</style>
